<template>
  <view class="huangLi_box" v-if="!this.$_.isEmpty(this.dayDetail)">
    <view class="huang_middle">
      <view class="data_center">
        <view
          class="day_data"
          style="justify-content: center; padding-top: 0"
          >{{ dayDetail.solar }}</view
        >
        <view class="option_box">
          <img
            @click="changeDay('pre')"
            class="icon-option"
            style="margin-right: 53rpx"
            src="@/static/images/calendar/icon-pre.png"
            alt=""
          />
          <view class="today_text"> {{ dayDetail.solarDay }}</view>
          <img
            @click="changeDay"
            style="margin-left: 53rpx"
            class="icon-option"
            src="@/static/images/calendar/icon-next.png"
            alt=""
          />
        </view>
        <view class="data_yin">
          {{ dayDetail.lunar }}
        </view>
        <view class="day_data" style="font-size: 24rpx">{{
          dayDetail.yearMonthDay
        }}</view>
        <view class="day_data" style="font-size: 24rpx">
          <view>{{ dayDetail.yearWuXing }}</view>
          <view style="margin-left: 24rpx"> {{ dayDetail.monthWuXing }}</view>
          <view style="margin-left: 24rpx">{{ dayDetail.dayWuXing }}</view>
        </view>
      </view>
    </view>
    <view class="act-box">
      <view class="act-box-left">
        <activity-box :positionId="901"></activity-box>
      </view>
      <view class="act-box-right">
        <activity-box :positionId="902"></activity-box>
      </view>
    </view>
    <view class="holiday_box" style="margin-top: 44rpx">
      <view class="holiday_title">
        <view
          class="title_left center"
          style="border-radius: 12rpx 0rpx 0rpx 0rpx"
        >
          节日
        </view>
        <view class="title_detail center">
          <view
            class="detail_item"
            v-for="(item, i) in dayDetail.holiday"
            :key="i"
          >
            {{ item }}</view
          >
          <view class="detail_item" v-if="!dayDetail.holiday.length"
            >无</view
          >
        </view>
        <view
          @click="goHoliday"
          style="border-radius: 0rpx 12rpx 0rpx 0rpx"
          class="title_right center"
        >
          点击查看更多节日
        </view>
      </view>
      <view class="holiday_title">
        <view class="title_left center"> 上一节气 </view>
        <view style="border-top: none" class="title_detail center">
          {{ dayDetail.prevJieQi }}
        </view>
      </view>
      <view class="holiday_title">
        <view class="title_left center"> 下一节气 </view>
        <view style="border-top: none" class="title_detail center">
          {{ dayDetail.nextJieQi }}
        </view>
      </view>
      <view class="holiday_title">
        <view class="title_left center">
          <img
            class="icon-yi"
            src="@/static/images/calendar/icon-yi@2x.png"
            alt=""
          />
        </view>
        <view
          style="border-top: none; padding-right: 8rpx"
          class="title_detail center"
        >
          <view
            class="detail_item"
            v-for="(item, i) in dayDetail.dayYi"
            :key="i"
          >
            {{ item }}</view
          >
        </view>
      </view>
      <view class="holiday_title">
        <view class="title_left center">
          <img
            class="icon-yi"
            src="@/static/images/calendar/icon-ji@2x.png"
            alt=""
          />
        </view>
        <view
          style="border-top: none; padding-right: 8rpx"
          class="title_detail center"
        >
          <view
            class="detail_item"
            v-for="(item, i) in dayDetail.dayJi"
            :key="i"
          >
            {{ item }}</view
          >
        </view>
      </view>

      <view v-for="(child, index) in [1, 2, 3]" :key="index">
        <view class="holiday_title">
          <view class="title_left center"> 时辰 </view>
          <view
            style="
              border-top: none;
              color: #fff;
              font-size: 24rpx;
              font-weight: bold;
              background: #ca4336;
              margin-left: 1rpx;
            "
            class="title_detail center time"
            v-for="(time, k) in getTime(index)"
            :key="k"
          >
            {{ time }}时
          </view>
        </view>
        <view class="holiday_title">
          <view
            class="title_detail center"
            style="
              width: 169rpx;
              flex: none;
              border-left: 2rpx solid #ca4336;
              border-bottom: none;
            "
          >
            时刻
          </view>
          <view
            style="border-top: none"
            class="title_detail center time"
            v-for="(hour, j) in getHours(index)"
            :key="j"
          >
            {{ hour }}
          </view>
        </view>
        <view class="holiday_title">
          <view
            class="title_detail center"
            style="width: 169rpx; flex: none; border-left: 2rpx solid #ca4336"
          >
            吉凶
          </view>
          <view
            style="border-top: none"
            class="title_detail center time"
            v-for="(item, i) in getJiXiong(index)"
            :key="i"
            :style="
              index === 2 && i === 3
                ? 'border-radius: 0rpx 0rpx 12rpx 0rpx'
                : ''
            "
          >
            <img
              style="width: 46rpx; height: 47rpx"
              :src="
                item === '吉'
                  ? '../../../../static/images/calendar/icon-time-ji.png'
                  : '../../../../static/images/calendar/icon-time-xiong.png'
              "
              alt=""
            />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    dayDetail: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    getTime() {
      //将12时辰分成3组,根据传入的下标返回对应的时辰数组
      let list = [
        "子",
        "丑",
        "寅",
        "卯",
        "辰",
        "巳",
        "午",
        "未",
        "申",
        "酉",
        "戌",
        "亥",
      ];
      return function (index) {
        return list.slice(index * 4, index * 4 + 4);
      };
    },

    getHours() {
      //返回12时辰对应的时间表
      let list = [
        "23:00-00:59",
        "1:00-2:59",
        "3:00-4:59",
        "5:00-6:59",
        "7:00-8:59",
        "9:00-10:59",
        "11:00-12:59",
        "13:00-14:59",
        "15:00-16:59",
        "17:00-18:59",
        "19:00-20:59",
        "21:00-22:59",
      ];
      return function (index) {
        return list.slice(index * 4, index * 4 + 4);
      };
    },

    getJiXiong() {
      //将dayDetail.jzJxList 分成四个数组，根据传入的下标返回对应的数组
      if (this.dayDetail.jzJxList) {
        return function (index) {
          return this.dayDetail.jzJxList.slice(index * 4, index * 4 + 4);
        };
      }
    },

    getText() {
      return function (item) {
        if (item) {
          return [item.slice(0, 3), item.slice(3, -1)];
        }
      };
    },
    getPengZu() {
      return function (item) {
        if (item) {
          //取item的后8位

          return [item.slice(0, 8), item.substr(-8)];
        }
      };
    },
  },
  methods: {
    changeDay(e) {
      this.$emit("changeDate", e === "pre" ? "pre" : "next");
    },
    goHoliday() {
      //跳转到节日详情
      this.$emit("changeTab", 2);
    },
  },
};
</script>

<style lang="scss" scoped>
.huang_middle {
  flex: 1;
  background: #ca4336;
  color: #fff;
  padding: 57rpx 0;
}
.huang_right {
  width: 162rpx;
}
.day_data {
  display: flex;
  justify-content: center;
  font-size: 38rpx;
  color: #ffffff;
  padding-top: 30rpx;
}
.option_box {
  margin-top: 66rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 57rpx;
    height: 84rpx;
  }
  .today_text {
    font-size: 162rpx;
    font-weight: bold;
    color: #ffffff;
  }
}
.data_yin {
  font-size: 38rpx;
  text-align: center;
  color: #ffffff;
  padding-top: 66rpx;
}
.data_center {
  font-size: 38rpx;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.holiday_title {
  display: flex;
  font-size: 24rpx;
  font-weight: bold;
  color: #ffffff;
}
.title_left {
  width: 169rpx;
  // height: 56rpx;
  background: #ca4336;
  border: 1px solid #e5e5e5;
  // border-radius: 12rpx 0rpx 0rpx 0rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.detail_item {
  margin-left: 12rpx;
  flex-shrink: 0;
}
.title_detail {
  flex: 1;
  font-size: 24rpx;
  color: #262626;
  border: 1px solid #ca4336;
  border-left: none;
  display: flex;
  flex-wrap: wrap;
  padding: 12rpx 0;
}
.title_right {
  flex: 1;
  background: #ca4336;
}
.icon-yi {
  width: 46rpx;
  height: 47rpx;
}
.time {
  font-size: 15rpx;
  font-weight: normal;
}
.act-box {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  justify-content: space-between;
  height: fit-content;
  overflow-y: hidden;
}
.act-box-left, .act-box-right {
  width: 49%;
  box-sizing: border-box;
}
</style>